<template>
  <div class="address">
    <x-header :left-options="{showBack: true, backText:'我的收货地址'}"><a slot="right" @click="manger">{{rightText}}</a></x-header>
      <section class="add-man" v-for="item in items" v-show="item.id">
          <div class="add-list" @click="def(item)">
            <p>{{item.text}}</p>
            <p>{{item.recipient}} {{item.gender | sexTrue}}同学 {{item.phone}}</p>
            <div class="def" v-show="item.status"><span class="iconfont icon-Ge_Dizhi_Gou"></span></div>
          </div>
      </section>

      <router-link  to="/dist/Createadd" ><div class="add-address">
        <span class="iconfont icon-Ge_Dizhi_Xinzeng"></span>新增收货地址
      </div></router-link>

  </div>
</template>

<script>
import { XHeader } from 'vux'

export default {
  components: {
    XHeader
  },
  data:function(){
    return {
      shan:true,
      rightText:'管理',
      items:[],
    }
  },
  mounted:function(){
    this.$http.get('/api/delivery-addresses').then(function (res) {
      this.items = res.body.data;
    })
  },
  methods:{
  def(item) {
    this.$http.put('/api/delivery-addresses/'+item.id).then((res) => {
      this.items.forEach(function(item){
        item.status = 0;
      });
      item.status = 1;
    });
  },
  manger() {
    this.$router.push({path:'/dist/Manadd'});
  }
  },
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.address{
  margin-top:46px;
  padding-bottom:60px;
}
.vux-header{
  background-color:#ff4d4d;
}
.add-man:nth-child(1){
  margin-top:0.3rem;
}
.add-man{
  overflow-x:scroll;

  width:100%;
  margin-bottom:0.3rem;
}
.add-list{
  height:5.3rem;
  width:100%;
  color:#3f3f3f;
  background-color:#fff;
  font-size:16px;
  position: relative;
}
.add-list{
  padding:1.2rem 0;
}
.add-list p{
  margin:0 2rem;
  line-height:2.7rem;
}
.add-list p:nth-child(2){
  color:#969696;
}
.add-address{
  width:100%;
  height:4.8rem;
  line-height:4.8rem;
  font-size:16px;
  color:#ff4d4d;
  text-align:center;
  position: fixed;
  bottom:0;
  z-index:1000;
  background-color:#fff;
}
.add-address .iconfont{
  margin-right:0.6rem;
}
.def{
  position: absolute;
  top:50%;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  right:1.5rem;
}
.def span{
  color:#ff4d4d;
  font-size:24px;
} 
</style>